<!--  -->
<template>
  <div>
    <my-echarts :options="option"></my-echarts>
  </div>

</template>
<script setup lang='ts' >
import { computed, PropType } from "vue"
import MyEcharts from "@/base-ui/echarts"

import { IRoseData } from "./types.ts"
const props = defineProps({
  roseData: {
    type: Array as PropType<IRoseData[]>,
    required: true
  },
})
let option = computed(() => {

  return {
    tooltip: {
      trigger: 'item'
    },
    legend: {
      top: '8%',
      left: 'center'
    },
    label: {
      show: false
    },
    emphasis: {
      label: {
        show: true
      }
    },

    toolbox: {
      show: true,
      feature: {
        mark: { show: true },
        dataView: { show: true, readOnly: false },
        restore: { show: true },
        saveAsImage: { show: true }
      }
    },
    series: [
      {
        type: 'pie',
        radius: [10, 100],
        center: ['50%', '60%'],
        roseType: 'area',
        itemStyle: {
          borderRadius: 6
        },
        data: props.roseData
      }
    ]

  }

})



</script>
<style lang='less' scoped>
</style>
